Министерство образования и науки Российской Федерации
Федеральное государственное бюджетное образовательное учреждение
«Чувашский государственный университет имени И. Н. Ульянова»
Факультет информатики и вычислительной техники
Кафедра математического и аппаратного обеспечения информационных
систем
Отчет по лабораторной работе
Выполнил: студент группы ИВТ-21-20
Абросимов А.А.
Чебоксары, 2023
1. Контент
Сайт посвящён магазину манги, включая обложку, название, цену,
описание продукта, а также его категории.
Структура сайта:
1. Шапка сайта
2. Главная Страница
3. Футер
4. Вкладка «О нас»
5. Новостной блог
2. Структура файлов
mangasora - Имя проекта
reader - имя проекта
static/css - папка для хранения статических файлов (CSS)
templates - папка для хранения файлов шаблонов HTML
uploads - для хранения пользовательских загруженных файлов
_init_.py - файл конфигурации приложения
database.db - файл базы данных SQLite
forms.py - для определения и настройки форм
models.py - файл, содержащий определения моделей базы данных
routes.py - файл маршрутизации URL-адресов
requirements.txt – документ установленных модулей
run.py – файл запуска проекта
3. HTML-тэги
header - Шапка сайта
a - Ссылки для перехода между страницами
img - Размещение изображений
nav - Навигация между страницами
div - Определение блочных элементов сайта
h1 - Заголовки страниц
p - Для размещения текста
li - Элемент маркированного или нумерованного списка
link - Подключения внешних таблиц стилей
ul - Создает маркированный список
footer - Определяет завершающую область
span - Контейнер для строчных элементов
form - Форма для сбора и отправки на сервер информации
button - Кнопка
4. CSS-стили
Блок карточки:
.card {
width: 220px;
display: inline-block;
margin: 1rem;
border-radius: 4px;
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
background: #fff;
position: relative;
overflow: hidden;
}
Изображение внутри карточки
.card-img {
position: relative;
height: 340px;
width: 100%;
background-color: #fff;
transition: opacity 0.2s ease;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
Содержание карточки
.card-content {
width: 100%;
min-height: 150px;
background-color: #fff;
border-top: 1px solid #E9E9EB;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
padding: 1rem 1rem;
transition: all 0.2s ease;
}
Футер
.site-footer
{
background-color:#343a40!important;
padding:45px 0 20px;
font-size:15px;
line-height:24px;
color:#737373;
}
Текст p
.p-o {
font-size: 1.25rem;
line-height: 1.5;
color: #006064;
text-align: justify;
}
5. Код и алгоритмы
Js-код:
<script id="rendered-js" >
$(document).ready(function () {
$('.card').delay(1800).queue(function (next) {
$(this).removeClass('hover');
$('a.hover').removeClass('hover');
next();
});
});
</script>
6. Фреймворк
Сайт разработан на фреймворке Flask, выбор которого обоснован
следующими факторами:
Flask имеет множество готовых инструментов и библиотек для
разработки веб-приложений, включая систему администрирования,
ORM, защиту от атак, управление URL, сессии и др;
Flask имеет обширную документацию, что облегчает процесс
разработки приложений;
гибкость и поддержка оптимизации благодаря расширению
функционала дополнительными пакетами;
Flask использует Python, который делает разработку более доступной и
удобной для разработчиков.
Для подключения к веб-сайту на Flask необходимо установить Flask на
сервер, настроить веб-сервер для работы с Flask приложением, настроить
подключение к базе данных и определить URL-адреса приложения.
Схема документов:
Модели данных - включают определение классов, которые описывают
объекты приложения и их взаимосвязи. Например, для описания книги,
это картинка, название, цена и описание;
Формы - формы для ввода и обработки данных, такие как формы для
добавления новой книги;
Шаблоны (Templates) - определяют визуальное представление страниц
сайта. В них можно использовать данные из моделей и форм, чтобы
отображать информацию для пользователей.
URL-адреса и обработка (routes) - определяют соответствие между URL-
запросами и представлениями, указывая, какой код должен выполняться
при обращении к определенному URL. Также определяют логику
обработки запросов и взаимодействия с моделями и формами.
Например, могут отображать список книг, обрабатывать добавление
записей и удаление.
7. Добавление контента
Манга добавляются из специальной страницы /create, доступ к которой
появляется при авторизации. Для пользователя, имеющего доступ к
добавлению контента, есть доступ к кнопке "Добавить", направляющая на
соответствующую страницу:
Если пользователь не имеет доступа, то при переходе на страницу / create
перекинет на страницу авторизации:
Форма добавления манги:
Проверка авторизации реализуется в файле routes.py:
@login_required
Модель манги для хранения в базе данных:
8. Аутентификация
Flask-Login обеспечивает управление сеансами пользователей для Flask.
Он обрабатывает общие задачи входа в систему, выхода из системы и
запоминания сеансов пользователей продолжительные периоды времени.
Класс представления должен реализовывать следующее представление и
чтобы упростить реализацию пользовательского класса, можно наследовать от
UserMixin:
При авторизации выполнятся функция login_page. В функции, при
заполнении всех ячеек, начинается сравнения хэш функций переданного с хэш
функцией, хранящейся в базе данных. Осуществляется преобразование в хэш-
функцию благодаря модулю - werkzeug.security. Если хэш-функция совпадает,
то с помощью login_user(user) заносится информация в сессию о текущем
пользователе.
Необходимо будет предоставить обратный вызов user_loader. Этот
обратный вызов используется для перезагрузки объекта пользователя из
идентификатора пользователя, хранящегося в сеансе. Должен принять str
идентификатор пользователя и вернуть соответствующего пользователя.
Возвращает None, если идентификатор недействителен. (В этом случае
идентификатор будет вручную удален из сеанса, и обработка продолжится.)
Flask обеспечивает поддержку сессий для отслеживания состояния
пользователя. Это позволяет сохранять данные о пользователе между
запросами, такие как аутентификационные данные. Flask обеспечивает
безопасное хранение информации о сеансе пользователя. Сохраняет
идентификатор активного пользователя в сеансе Flask и позвольте вам легко
войти в систему. Позволяет ограничить просмотр только вошедшим в систему
(или вышедшим из системы) пользователям. (login_required). Выполните
сложную функцию «запомнить меня». Помогает защитить сеансы
пользователей от кражи файлов cookie похитителями.
По умолчанию Flask-Login использует сеансы для аутентификации, в
следствии этого стоит установить секретный ключ.
Если пользователю необходимо завершить сеанс, то это реализовывается
с помощью декоратора logout_user, при выходе все файлы cookie, относящиеся
к сеансу, будут удалены.
9. Адаптация
Поддерживаемые устройства:
ПК
Мобильные устройства
Адаптация под мобильные устройства реализована с помощью блоков со
свойствами max-width, display: flex, flex и flex-wrap: wrap/wrap-reverse. Таким
образом, широких экранов картинки с текстом будут отображаться
последовательно в линию.
Широкий экран:
Маленький экран:
